<template>
  <basic-container>
    <contract-customer-list
      ref="contractCustomerListRef"
      v-show="showType === 'list'"
      @add="handleAdd"
      @detail="handleDetail"
    />
    <contract-customer-detail-content
      :id="detailId"
      v-if="showType === 'detail'"
      @back="handleBack"
    />
  </basic-container>
</template>

<script>
import ContractCustomerList from "./compontents/contract-customer-list.vue";
import ContractCustomerDetailContent from "./compontents/contract-customer-detail-content.vue";

export default {
  components: { ContractCustomerDetailContent, ContractCustomerList },
  data() {
    return {
      showType: "list",
      detailId: "",
    };
  },
  methods: {
    handleBack(flag) {
      this.showType = "list";
      if (flag) this.$refs.contractCustomerListRef.refresh();
    },
    handleAdd() {
      this.showType = "add";
    },
    handleDetail(_id) {
      this.showType = "detail";
      this.detailId = _id;
    },
  },
};
</script>

<style lang="scss" scoped></style>
